 <template>
  <div class="make">
    <div class="titles">
      <h4>预约规则</h4>
      <span>创建人：{{searchData.createPerson}}</span>
      <span>创建时间：{{ searchData.createTime }}</span>
    </div>

    <div class="main">
      <!-- 日期设置 -->
      <div class="dateMake" v-if="dateMake" style="overflow:hiiden;">
        <h3>预约日期设置
          <a href="javascript:;" @click="editDate()">编辑</a>
        </h3>
        <span>
          <strong>预约日期：</strong>
          {{ searchData.workDate || '' }}
        </span>
        <span>
          <strong>非预约日期：</strong>
          <div class="checkMore">
            <i  v-for="(item,x) in searchDataHoliday" :key="x"  v-if="x<hilidayNum" style="padding-left:5px;font-style:normal;"> 
            {{item}}
            </i>  
            <a href="javascript:;"  @click="checkMore()">
              {{checkMoreMessage}}
              <i class="el-icon-arrow-down"></i>
            </a>
          </div>
        </span>
        <span class="checkMake" v-if="searchData.workDateFlag">
          <a href="javascript:;" @click="nowMakeDate()">查看现行规则</a>
          <i>生效日期：{{searchData.workDateEffectiveTime}}</i>
        </span>
      </div>

      <!-- 日期编辑 -->
      <div class="dateMakeOne dateMake" style="height:290px;" v-else>
        <h3>预约日期设置
          <a href="javascript:;" @click="editDate()">取消</a>
        </h3>
        <el-form ref="form" label-width="120px">
          <el-form-item label="预约日期 ：" style="width:100%;">
            <el-select
              v-model="orderWeekStart"
              size="small"
              @change="getStartWeek($event)"
              placeholder="请选择"
              style="width:350px;"
            >
              <el-option v-for="(item,i) in options" :key="i" :value="item"></el-option>
            </el-select>&nbsp; &nbsp;至 &nbsp; &nbsp;
            <el-select
              v-model="orderWeekEnd"
              size="small"
              @change="getEndWeek($event)"
              placeholder="请选择"
              style="width:350px;"
            >
              <el-option v-for="(item,i) in optionsTwo" :key="i" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="非预约日期 ：" class="dateMakeSnake" style="width:100%;">
            <el-button class="dateOne" style="width:350px;" icon="el-icon-date" size="small">非预约日期设置</el-button>
            <el-tooltip placement="top">
              <div style="width:500px;" slot="content">设置预约日期后，可设置非预约时间段，例如：已设置每周一至每周五可预约，则点击非预约时间段设置，
                        可选择每周一/周二/周三/周四/周五的非预约时间段（如：每周一上午9：00-11：00不可预约）注：非预约时间段设置后
                        ，系统将以你所设置的非预约时间段 为主，与可预约的时间段设置不会发生冲突</div>
              <el-button class="imgSlot el-icon-info" size="small"></el-button>
            </el-tooltip>

            <el-date-picker
              class="chooseDate"
              size="small"
              ref="datesRef"
              type="dates"
              v-model="dateArr"
              :editable="false"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择一个或多个日期"
            ></el-date-picker>
          </el-form-item>

          <el-form-item label="生效日期 ：">
            <el-date-picker
              style="width:350px;"
             
              size="small"
              v-model="value11"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="生效日期设置"
            ></el-date-picker>
          </el-form-item>
          <div class="primary">
            <el-button type="primary" :plain="true" @click="subMakeDates()" style="width:120px;">提交</el-button>
            <el-button :plain="true" style="width:120px;" @click="dialogVisibleMakeDate = true">预览</el-button>
          </div>
        </el-form>
      </div>
      <!-- 预约日期预览 -->
      <el-dialog title="预约日期预览" :visible.sync="dialogVisibleMakeDate" width="60%" class="preview">
        <p>
          <strong>预约日期：</strong>
          {{orderWeekStart}}至{{orderWeekEnd}}
        </p>
        <p>
          <strong>非预约日期：</strong>
          <span v-for="(item,i) in dateArr" :key="i">{{item}},</span>
        </p>
        <p>
          <strong>生效日期：</strong>
          {{value11}}
        </p>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisibleMakeDate = false">确定</el-button>
        </span>
      </el-dialog>
      <!-- 查看现行日期规则 -->
      <el-dialog title="现行日期规则" :visible.sync="nowShowDate" width="50%" class="preview">
        <p>
          <strong>预约日期：</strong>
          {{nowMakeDateList.workDate}}
        </p>
        <p>
          <strong>非预约日期：</strong>
          {{ nowMakeDateList.holiday}}
        </p>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="nowShowDate = false">确定</el-button>
        </span>
      </el-dialog>

      <!-- 时间段设置 -->
      <div class="dateMake" style="overflow:hidden;" v-if="dateTimeMake">
        <h3>预约时间段设置
          <a href="javascript:;" @click="dateTimeMakeFc()">编辑</a>
        </h3>
        <div style="overflow:hidden;">
          <div class="flLeft">
            <p>可预约时间段：</p>
          </div>
          <div class="flRight">
            <p
              v-for="(item,i) in searchData.bookingPeopleArr"
              :key="i"
            >{{item.startTime}}~{{item.endTime}} 最多可预约{{item.number}}人 非预约用户线下可取号{{item.offlineNum}}个</p>
          </div>
        </div>
        <div>
          <div class="flLeft">
            <p>非预约时间段：</p>
          </div>
          <div class="flRight">{{searchData.notAppoTime || '未设置'}}</div>
          <div class="checkMake" v-if="searchData.bookingPeopleFlag">
            <a href="javascript:;" style="text-indent:15px;" @click="nowMakeTime()">查看现行规则</a>
            <i>生效日期：{{searchData.workTimeEffectiveTime}}</i>
          </div>
        </div>
      </div>
      <!-- 时间段编辑 -->
      <div class="dateMake dateMakeOne dateTimeMake" v-else>
        <h3>预约时间段设置
          <a href="javascript:;" @click="dateTimeMakeFc()">取消</a>
        </h3>
        <div style="overflow:hidden;">
          <div class="flLeft">
            <p>预约时间：</p>
          </div>
          <div class="flRight">
            <ul>
              <li v-for="(item,i) in appointmentPeriod" :key="i">
                <el-time-select
                 :clearable='false'
                  v-model="item.startTime"
                  :picker-options="{
                          start:appointmentPeriod[i-1] ? appointmentPeriod[i-1].endTime :'00:30',
                          step: '00:30',
                          end:  item.endTime || '24:00'
                        }"
                  size="small"
                  placeholder="请选择"
                  style="width:102px;"
                ></el-time-select> 
                至
                <el-time-select
                 :clearable='false'
                  v-model="item.endTime"
                  :picker-options="{
                          start: item.startTime || '00:30',
                          step: '00:30',
                          end: appointmentPeriod[i+1] ? appointmentPeriod[i+1].endTime :'24:00',
                          minTime: item.startTime || '00:00'
                        }"
                  size="small"
                  placeholder="请选择"
                  style="width:102px;"
                ></el-time-select>
                <b>该时间段最高预约</b>
                <el-input-number
                  v-model="item.number"
                  size="small"
                  controls-position="right"
                  @change="handleChange"
                  :min="1"
                  :max="1000"
                  style="width:90px;"
                ></el-input-number> 人
                <b>该时间段非预约用户可取号</b>
                <el-input-number
                  size="small"
                  style="width:90px;"
                  v-model="item.offlineNum"
                  controls-position="right"
                  @change="handleChange"
                  :min="1"
                  :max="1000"
                ></el-input-number> 个
                <i
                  class="el-icon-delete"
                  v-if="appointmentPeriod.length>1"
                  style="color:#CE4959;font-size:18px;cursor:pointer;"
                  @click="deleteMakeTime(i)"
                ></i>
              </li>
            </ul>
            <el-button
              icon="el-icon-plus"
              :plain="true"
              @click="addOrderTime()"
              style="border:1px dotted #999;width:100%;"
            >添加更多</el-button>
          </div>
        </div>
        
        <el-form ref="form" label-width="120px" class="datatimes" style="100%;overflow:hidden;">
          <el-form-item label="非预约时间段:">
            <div class="dateMakeSnake">
   
              <div class="timeSlot" v-if="visible2">
                <div class="timeSlotMain">
                  <ul>
                    <li v-for="(week,x) in arrIndex" :key="x" style="overflow:hidden;">
                      <span
                        class="makeDateLeft"
                        style="width:100px;float:left;text-align:center;margin-top:12px;"
                      >{{textArr[x]}}</span>
                      <div class="makeDateRight" style="width:300px;display:inline-block;">
                        <div
                          class="makeDateRightList"
                          v-for="(day,i) in week"
                          :key="i"
                          style="margin-top:10px;"
                        >
                          <el-select
                            v-model="week[i]"
                            placeholder="请选择"
                            style="width:250px;text-align:center;"
                            @change="getNotTime($event,x)"
                          >
                            <el-option
                              v-for="(item,y) in notOrderTimeList[x]"
                              :key="y"
                              :label="item.label"
                              :disabled="item.disabled"
                              :value="item.value"
                            ></el-option>
                          </el-select>
                          <i
                            class="el-icon-delete"
                            @click="deleteListTime(x,i,week[i])"
                            style="color:#CE4959;font-size:20px;margin-left:10px;cursor:pointer;"
                          ></i>
                        </div>
                        <el-button
                          icon="el-icon-plus"
                          size="small"
                          :disabled="fullTimeDate[x]"
                          style="border:1px dotted #999;width:250px;margin-top:10px;"
                          @click="addDateSlot(x)"
                        >添加更多</el-button>
                      </div>
                    </li>
                  </ul>
                   <div style="text-align: right; margin: 10px;">
                    <el-button
                      type="primary"
                      size="small"
                      style="width:150px;"
                      @click="getConfirm()"
                    >保存</el-button>
                    <el-button
                      size="small"
                      type="text"
                      style="width:150px;border:1px solid #999;margin-right:50px;"
                      @click="getRemove()"
                    >取消</el-button>
                  </div>
                </div>
               
              </div>
              <el-button slot="reference" @click="notTimeFn()" style="width:350px;" size="small">非预约时段设置</el-button>
              <el-tooltip placement="bottom">
              <div style="width:500px;" slot="content">设置预约日期后，可设置非预约时间段，例如：已设置每周一至每周五可预约，则点击非预约时间段设置，
                        可选择每周一/周二/周三/周四/周五的非预约时间段（如：每周一上午9：00-11：00不可预约）注：非预约时间段设置后
                        ，系统将以你所设置的非预约时间段 为主，与可预约的时间段设置不会发生冲突</div>
              <el-button class="imgSlot el-icon-info" size="small"></el-button>
            </el-tooltip>
            </div>
          </el-form-item>
        </el-form>

        <el-form ref="form" label-width="120px" class="datatimes">
          <el-form-item label="生效日期:">
            <el-date-picker
              style="width:350px;"
              size="small"
              v-model="cannoteOederTime"
              type="date"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
              placeholder="生效日期设置"
            ></el-date-picker>
          </el-form-item>
        </el-form>
        <div class="primary">
          <el-button type="primary" @click="subMakeTime()" :plain="true" style="width:120px;">提交</el-button>
          <el-button
            type="primary"
            style="width:120px;"
            @click="timeYulan()"
            plain
          >预览</el-button>
        </div>
      </div>

      <!-- 预约时间段预览 -->
      <el-dialog
        title="预约时间段预览"
        :visible.sync="dialogVisibleMakeTimeDate"
        width="30%"
        class="preview"
        >
        <div>
          <strong>预约时间段：</strong>
          <p v-if="appointmentPeriod[0].startTime"> <span
            style="display:block;"
            v-for="(item,i) in appointmentPeriod"
            :key="i"
          >{{item.startTime}}至{{item.endTime}} 该时间段最高预约{{item.number}}人 该时间段非预约用户可取号{{item.offlineNum}}次</span></p>
          <p v-else>未设置</p>
         
        </div>
        <p>
          <strong>非预约时间段：</strong>
          <span v-if="yuLanTime.length>0">{{yuLanTime}}</span>
          <span v-else>未设置</span>
        </p>
        <p>
          <strong>生效日期：</strong>
          {{cannoteOederTime}}
        </p>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisibleMakeTimeDate = false">确定</el-button>
        </span>
      </el-dialog>

      <!-- 查看现行时间段规则 -->
      <el-dialog title="现行时间段规则" :visible.sync="nowShowTime" width="30%" class="preview">
        <div>
          <strong>预约时间段：</strong>
          <p
            v-for="(item,i) in nowMakeTimeList.bookingPeopleArr"
            :key="i"
          >{{item.startTime}}~{{item.endTime}} 最多可预约{{item.number}}人 非预约用户线下可取号{{item.offlineNum}}个</p>
        </div>
        <p>
          <strong>非预约时间段：</strong>
          {{ nowMakeTimeList.notAppoTime}}
        </p>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="nowShowTime = false">确定</el-button>
        </span>
      </el-dialog>

      <!-- 取号设置 -->
      <div class="fetchNumber" v-if="fetchNumberMake">
        <h3>取号设置
          <a href="javascript:;" @click="fetchNumberMakefC()">编辑</a>
        </h3>
        <span>
          <strong>提前预约：</strong>
          最低可提前{{searchData.appoDayStart}}天预约 至 最高可提前{{searchData.appoDayEnd}}天预约
        </span>
        <span>
          <strong>预约取号：</strong>
          每人每天可预约次数为{{searchData.maxAppoNum}}次
        </span>
        <span v-if="!searchData.takeNumSet">
          <strong>取号设置：</strong>当天上午只取上午的号码，下午只取下午的号码
        </span>
        <span v-else>
          <strong>取号设置：</strong>当天可取当天所有号码
        </span>
      </div>
      <!-- 取号编辑 -->
      <div class="fetchNumber fetchNumberOne" v-else>
        <h3>取号设置
          <a href="javascript:;" @click="fetchNumberMakefC()">取消</a>
        </h3>
        <div>
          <strong>取号设置：</strong>
          <el-radio v-model="radio" label="true">当天可取当天所有号码</el-radio>
          <el-radio v-model="radio" label="false">上午只取上午的号码，下午只取下午的号码</el-radio>
        </div>
        <div style="margin-bottom:0px;">
          <strong>预约取号：</strong>
          每人每天最多可预约
          <el-select v-model="maxAppoNum" size="small" placeholder="请选择" style="width:100px;">
            <el-option
              v-for="(item,i) in orderBeforeNum"
              :key="i"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>次
        </div>
        <div>
          <strong>提前预约：</strong>
          <el-select
            v-model="orderNumberDay[0]"
            size="small"
            @change="getOrderBefore($event)"
            placeholder="请选择"
            style="width:100px;"
          >
            <el-option
              v-for="(item,i) in orderNumberOne"
              :key="i"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>天
          &nbsp; &nbsp;至 &nbsp; &nbsp;
          <el-select
            v-model="orderNumberDay[1]"
            size="small"
            @change="getOrderBeforeTwo($event)"
            placeholder="请选择"
            style="width:100px;"
          >
            <el-option
              v-for="(item,i) in orderNumberTwo"
              :key="i"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>天
          <b>&nbsp;&nbsp;&nbsp;则：可预约日期为{{ canOederStart }} ~ {{ canOederEnd }}</b>
        </div>
        <div class="primary">
          <el-button type="primary" :plain="true" style="width:120px;" @click="subMakeValue()">提交</el-button>
          <el-button style="width:120px;" @click="dialogVisible = true">预览</el-button>
        </div>
      </div>
      <!-- 取号预览 -->
      <el-dialog title="取号预览" :visible.sync="dialogVisible" width="30%" class="preview">
        <p>
          <strong>提前预约：</strong>
          最低可提前{{orderNumberDay[0]}}天预约 至 最高可提前{{orderNumberDay[1]}}天预约
        </p>
        <p>
          <strong>预约取号：</strong>
          每人每天可预约次数为{{maxAppoNum}}次
        </p>
        <p v-if="radio == 'false'">
          <strong>取号设置：</strong>当天上午只取上午的号码，下午只取下午的号码
        </p>
        <p v-else>
          <strong>取号设置：</strong>当天可取当天所有号码
        </p>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 爽约设置 -->
      <div class="dateMake" v-if="breakCintract">
        <h3>爽约机制设置
          <a href="javascript:;" @click="breakCintractFc()">编辑</a>
        </h3>
        <span v-if="searchData.breakAppoSet">
          <strong>爽约机制：</strong>
          采用爽约机制 &nbsp;&nbsp; 若爽约达到{{searchData.breakNum}}次，则{{searchData.breakDay}}天内不可预约
        </span>
        <span v-else>
          <strong>爽约机制：</strong>不采用爽约机制
        </span>
      </div>
      <!-- 爽约编辑 -->
      <div class="dateMake dateMakeOne" v-else>
        <h3>爽约机制设置
          <a href="javascript:;" @click="breakCintractFc()">取消</a>
        </h3>
        <strong>爽约机制：</strong>
        <el-radio v-model="radio1" :label="breakOne">是，采用爽约机制</el-radio>
        
        <div class="shuangyue" v-if="radio1">
          若爽约次数达到
          <el-input-number
            size="small"
            style="width:90px;"
            v-model="breakNum"
            controls-position="right"
            @change="handleChange"
            :min="1"
            :max="100"
          ></el-input-number> 次
          &nbsp;则 &nbsp;
          <el-input-number
            size="small"
            style="width:90px;"
            v-model="breakDay"
            controls-position="right"
            @change="handleChange"
            :min="1"
            :max="100"
          ></el-input-number> 天内不可预约
        </div>
        <el-radio v-model="radio1" :label="breakTwo">否，不采用爽约机制</el-radio>
        <div class="primary">
          <el-button type="primary" :plain="true" style="width:120px;" @click="subBreak()">提交</el-button>
          <el-button @click="dialogVisibleBreak = true" style="width:120px;" plain>预览</el-button>
        </div>
      </div>

      <!-- 爽约预览 -->
      <el-dialog title="爽约机制预览" :visible.sync="dialogVisibleBreak" width="30%" class="preview">
        <p v-if="radio1">
          <strong>爽约机制：</strong>
          采用爽约机制,爽约达到 {{breakNum}}次，{{breakDay}} 天内不可预约
        </p>
        <p v-else>
          <strong>爽约机制：</strong>不采用爽约机制
        </p>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisibleBreak = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { makeSearch, makeNumEit, subMakeNum, breakEidt, breakSub, makeDateTime,
  subMakeDate,makeDateTimeSet,searchEvaluate, makeDateTimeSub,nowMakeDates,nowMakeTimes,getHiliday} from "../api/getData";
import { forEach } from "async";
import { setTimeout } from 'timers';
import { from } from 'zen-observable';
export default {
  name: "make",
  data: function() {
    return {
      title: "预约规则",
      orderWeekStart: "每周一",
      orderWeekEnd: "每周五",
      options: [
        "每周一",
        "每周二",
        "每周三",
        "每周四",
        "每周五",
        "每周六",
        "每周日"
      ],
      optionsTwo: [],
      textArrStart: 0,
      textArrEnd: 5,
      breakNum: "", //爽约次数
      breakDay: "", //爽约天数
      breakOne: true, //采用爽约机制
      breakTwo: false, //不采用
      dateMake: true,
      dateTimeMake: true,
      fetchNumberMake: true,
      breakCintract: true,
      dateArr: [],
      radio: true,
      radio1: true,
      isShows: false,
      isShowDates: false,
      isShowTimeSlot: false,
      textArr: "",
      arrIndex: {},
      arrIndexEnd: [],
      searchData: {}, //查询结果显示
      searchDataHoliday:[],
      visible2: false,
      fullTime: false, //预约时间段不可再添加
      fullTimeDate: [], //预约时间段不可再添加
      appointmentPeriod: [[]], //预约时间段
      dialogVisibleMakeTimeDate: false, //预约时间段预览
      notOrderTime: "", //非预约时间段
      yuLanTime:'',
      cannoteOederTime:
        new Date().getFullYear() +
        "-" +
        ((new Date().getMonth() + 1)>9 ? (new Date().getMonth() + 1):''+ 0 +(new Date().getMonth() + 1)) +
        "-" +
       (new Date().getDate()>9? new Date().getDate():''+ 0 + new Date().getDate()), //非预约时间段生效日期
      notOrderTimeList: [], //非预约时间段集合
      dialogVisibleMakeDate: false, //预约日期预览
      dialogVisible: false, //取号设置预览
      dialogVisibleBreak: false, //爽约设置预览
      holidayCheckMore: true,
      checkMoreMessage: "查看更多",
      hilidayNum:3,
      maxAppoNum: "", //没人每天最多可预约次数
      orderBeforeNum: [
        { value: " 1", label: " 1" },
        { value: "2", label: " 2" },
        { value: " 3", label: " 3" },
        { value: "4", label: " 4" },
        { value: "5", label: "5" }
      ],
      orderNumberDay: ["", ""],
      orderNumber: [
        { value: "0", label: "0" },
        { value: "1", label: "1" },
        { value: "2", label: "2" },
        { value: "3", label: "3" },
        { value: "4", label: "4" },
        { value: "5", label: "5" },
        { value: "6", label: "6" },
        { value: "7", label: "7" },
        { value: "8", label: "8" },
        { value: "9", label: "9" },
        { value: "10", label: "10" },
        { value: "11", label: "11" },
        { value: "12", label: "12" },
        { value: "13", label: "13" },
        { value: "14", label: "14" },
        { value: "15", label: "15" }
      ],
      orderNumberOne: [],
      orderNumberTwo: [],
      canOederStart: "",
      canOederEnd: "",
      value1: "",
      value11:
        new Date().getFullYear() +
        "-" +
        ((new Date().getMonth() + 1)>9 ? (new Date().getMonth() + 1):''+ 0 +(new Date().getMonth() + 1)) +
        "-" +
        (new Date().getDate()> 9 ? new Date().getDate():''+ 0 + new Date().getDate()),
      makeNunSet: "",
      breakMessage: "", //爽约编辑
      notTimeList: [], //预约时间段
      latticeid: "",
      nowMakeDateList: "", //现行日期规则数据
      nowShowDate: false, ///现行日期规则
      nowMakeTimeList: false, ///现行日期规则shuju
      nowShowTime: false, ///现行日期规则
      notTimeDaiLi:[],
      notTimeDaiLiFalse:true

    };
  },
  components: {},
  created: function() {}, // 创建时
  beforeMount: function() {}, // 挂载之前
  mounted: function() {
    this.latticeid = JSON.parse(window.sessionStorage.getItem("latticeid"));
    this.searchMakeFn() 
    this.editDateFn();
   
  }, // 挂载之后
  beforeUpdate: function() {}, // 数据更新时调用,在渲染之前
  updated: function() {}, // 数据更新后,渲染后调用(禁止)
  beforeDestroy: function() {}, // 实例销毁前调用,解绑中间层的数据传输
  destroyed: function() {}, // 实例销毁后调用
  methods: {
    //查询规则
    searchMakeFn(){
      makeSearch({ latticeId: this.latticeid }).then(data => {
        this.searchData = data.data.data;
        if(data.data.data.holiday){
          this.searchDataHoliday =data.data.data.holiday.split(',');
        }
      });
    },


    //查看现行日期规则
    nowMakeDate() {
      nowMakeDates({ latticeId: this.latticeid }).then(data => {
       
        this.nowMakeDateList = data.data.data;
        this.nowMakeDateList.holiday = data.data.data.holiday.split(",");
        console.log(data.data.data);
        this.nowShowDate = true;
      });
    },
    //查看现行时段规则
    nowMakeTime() {
      nowMakeTimes({ latticeId: this.latticeid }).then(data => {
        this.nowMakeTimeList = data.data.data;
        this.nowShowTime = true;
      });
    },

    //预约日期编辑
    editDate() {
      this.dateMake = !this.dateMake;
      if(!this.dataMake){
        this.dateTimeMake = true;
        this.fetchNumberMake = true;
        this.breakCintract = true;
        this.editDateFn();
       
      }
    },
    editDateFn(){
      makeDateTime({ latticeId: this.latticeid, workDateFlag: false }).then(
          data => {
            var datas = data.data.data.workDay.split("至");
            this.options.indexOf(datas[0]);
            this.orderWeekStart = datas[0];
            this.orderWeekEnd = datas[1];
            let dcs = [];
            var options = ["每周一", "每周二", "每周三", "每周四", "每周五", "每周六", "每周日"]
            dcs = data.data.data.holiday.replace(/\//g, "-");
            this.dateArr = dcs.split(",");
            this.textArrStart = options.indexOf(this.orderWeekStart);
            this.textArrEnd = options.indexOf(this.orderWeekEnd) + 1;
            this.optionsTwo = ["每周一", "每周二", "每周三", "每周四", "每周五", "每周六", "每周日"].slice(this.textArrStart, 7)
            this.options = this.options.slice(0, this.textArrEnd);
            this.arrIndex = [[], [], [], [], [], [], []].slice(this.textArrStart,this.textArrEnd);
            
          }
        );
    },

    //预约日期提交
    subMakeDates() {
      var holidaySet = this.dateArr.join(",");
      subMakeDate({
        workDateStart: "" + this.orderWeekStart || "",
        workDateEnd: "" + this.orderWeekEnd || "",
        holidaySet: holidaySet || "",
        effectiveTime: "" + this.value11 || "",
        latticeId: Number(this.latticeid) || "",
        workDateFlag: this.searchData.workDateFlag
      }).then(data => {
        console.log(data.data);
        if (data.data.code == 0) {
          this.$message({
            message: data.data.msg,
            type: "success"
          });
          this.searchMakeFn();
          this.dateMake = true
        } else {
          this.$message({
            message: data.data.msg,
            type: "warning"
          });
        }
      });
    },

    //获取当前开始日期
    getStartWeek(e) {
      var _listDay = [ "每周一", "每周二", "每周三","每周四","每周五","每周六", "每周日" ];
      this.textArrStart = _listDay.indexOf(e);
      this.optionsTwo = _listDay.slice(this.textArrStart, 7);
      getHiliday({'workDateStart':this.orderWeekStart,'workDateEnd':this.orderWeekEnd}).then((data) =>{
          this.dateArr = data.data.data
        })
    },
    //获取当前结束日期
    getEndWeek(e) {
      var _listDay = [ "每周一", "每周二", "每周三","每周四","每周五","每周六", "每周日" ];
      this.textArrEnd = _listDay.indexOf(e) + 1;
      this.options = _listDay.slice(0, this.textArrEnd);
      getHiliday({'workDateStart':this.orderWeekStart,'workDateEnd':this.orderWeekEnd}).then((data) =>{
          this.dateArr = data.data.data
      })
    },
    //非预约日期查看更多
    checkMore() {
      this.holidayCheckMore = !this.holidayCheckMore;
      if (this.holidayCheckMore == true) {
        this.checkMoreMessage = "查看更多";
        this.hilidayNum = 3
      } else {
        this.checkMoreMessage = "收起";
        this.hilidayNum = 999999;
      }
    },
    //删除指定时间段
    deleteListTime(x, i, el) {
      this.arrIndex[x].splice(i, 1);
      if(this.notOrderTimeList[x][el]){
          this.notOrderTimeList[x][el].disabled = false;
      }
       if(this.arrIndex[x].length < this.notOrderTimeList[x].length){
        this.fullTimeDate[x] = false;
      }
    },
    //确定所设置的时间段 "每周五&12:00-18:00|18:00-19:00,每周三&12:00-18:00|18:00-19:00"
    getConfirm() {
      this.visible2 = false;
      var _this = this;
      var listOne = "";
      var sliceDuan;
      var nums = "";
      var notTimeList = this.arrIndex || this.notOrderTimeList;
      var _options = [ "每周一", "每周二", "每周三","每周四","每周五","每周六", "每周日" ];
      sliceDuan = _options.slice(this.textArrStart, this.textArrEnd);
      notTimeList.forEach(function(item, index) {
        for (let y = 0; y < item.length; y++) {
            if(item[y] === ""){
               item.splice(y,1)
            }
         }
      if (item.length > 0 && item != '') {
        nums = "";
        for (let i = 0; i < item.length; i++) {
               if(i == 0){
                  if(_this.notOrderTimeList[0][item[i]]){
                  nums += _this.notOrderTimeList[0][item[i]].label ;
                  }
                } else {
                  if(_this.notOrderTimeList[0][item[i]]){
                      nums += "|" + _this.notOrderTimeList[0][item[i]].label ;
                  }
                }   
        }
        listOne += sliceDuan[index] + "&" + nums + ",";
      }
      });
      let obj = JSON.parse(JSON.stringify(this.arrIndex));
      this.notTimeDaiLi =  obj
      return listOne;
    },
    getConfirmYuLan(){
        this.visible2 = false;
        var _this = this;
        var listOne = "";
        var sliceDuan;
        var nums = "";
        var _options = this.options;
        var notTimeList = this.arrIndex || this.notOrderTimeList;
        sliceDuan = _options.slice(this.textArrStart, this.textArrEnd);
        notTimeList.forEach(function(item, index) {
          for (let y = 0; y < item.length; y++) {
            if(item[y] === ""){
               item.splice(y,1)
            }
         }
          if (item.length > 0 && item != '') {
            nums = "";
            for (let i = 0; i < item.length; i++) {
                   if(i == 0){
                     if(_this.notOrderTimeList[0][item[i]]){
                       nums += _this.notOrderTimeList[0][item[i]].label ;
                    }
                  } else {
                    if(_this.notOrderTimeList[0][item[i]]){
                        nums += "|" + _this.notOrderTimeList[0][item[i]].label ;
                    }
                  }   
            }
            listOne += sliceDuan[index] + " " + nums + " ";
          }
        });
        return listOne;
        let obj = JSON.parse(JSON.stringify(this.arrIndex));
        this.notTimeDaiLi =  obj
    },
    
    //预约时间段编辑
    dateTimeMakeFc() {
      this.dateTimeMake = !this.dateTimeMake;
      var _this = this;
      if (!this.dateTimeMake) {
       this.textArr = ["每周一", "每周二", "每周三", "每周四", "每周五", "每周六", "每周日"].slice(this.textArrStart,this.textArrEnd);
        this.dateMake = true;
        this.fetchNumberMake = true;
        this.breakCintract = true;
        makeDateTimeSet({
          latticeId: _this.latticeid,
          bookingPeopleFlag: _this.searchData.bookingPeopleFlag
        }).then(data => {
          _this.appointmentPeriod = data.data.data.bookingArr || [[]];
          let dcs = [];
          let notTimeList = [];
          if (data.data.data.bookingArr) {
           
            var dateTimeLength = data.data.data.bookingArr.length;
            for (let i = 0; i < dateTimeLength; i++) {
              let temp = {label:data.data.data.bookingArr[i].startTime + "-" +data.data.data.bookingArr[i].endTime,value: i,disabled: false};
              let tempList = "" +data.data.data.bookingArr[i].startTime + "-" +data.data.data.bookingArr[i].endTime;
              console.log(tempList,'tempList')
             notTimeList.push(tempList);
              this.notTimeList = notTimeList;
              dcs.push(JSON.parse(JSON.stringify(temp)));
              
            }
            
            for (let i = 0; i < this.arrIndex.length; i++) {
              this.notOrderTimeList.push(JSON.parse(JSON.stringify(dcs)));
            }
             
            let _notTime = [];
            _notTime = JSON.parse(
              JSON.stringify(data.data.data.notAppoTime)
            );
            var arrs = [];
            var timeDs = [];
           console.log(_notTime.length,'_notTime.length')
            for (let i = 0; i < _notTime.length; i++) {
              let _arrIndex = this.textArr.indexOf(_notTime[i].week);
              arrs.push(_arrIndex);
              _notTime[i].weekTimes.forEach((item, index) => {
                if (!Array.isArray(timeDs[i])) {
                  timeDs[i] = [];
                }
                var timeIndex = item.startTime + "-" + item.endTime;
                this.getNotTime(
                  notTimeList.indexOf(timeIndex),
                  _arrIndex,
                  false
                );
                timeDs[i].push(notTimeList.indexOf(timeIndex));
              });
            }
            this.arrIndex = [[], [], [], [], [], [], []].slice(this.textArrStart,this.textArrEnd);
            for (let x = 0; x < arrs.length; x++) {
              for (let y = 0; y < timeDs[x].length; y++) {
                if(!Array.isArray(this.arrIndex[arrs[x]])){
                  this.arrIndex.push([]);
                }
                this.arrIndex[arrs[x]].push(timeDs[x][y]);
                
              }
            }
           let obj = JSON.parse(JSON.stringify(this.arrIndex));
           this.notTimeDaiLi =  obj
           console.log(obj)
          }
        });
      }
      
    },
    //取消所设置的非预约时间段
    getRemove() {
      let obj = JSON.parse(JSON.stringify(this.notTimeDaiLi))
      console.log(this.arrIndex,this.notTimeDaiLi)
      this.arrIndex = obj;
      this.visible2 = false;
      
    },

    //非预约时间段显示
    notTimeFn(){
       var  isTrue = false;
       this.arrIndex.forEach((item,index) =>{
         console.log(this.arrIndex[index].length,this.notOrderTimeList[index].length)
          if(this.arrIndex[index].length>=this.notOrderTimeList[index].length){
            this.fullTimeDate[index] =true;
            console.log(1)
          }else{
              this.fullTimeDate[index] = false
              console.log(2)
          }
        })
       for(var i=0;i<this.appointmentPeriod.length;i++){
              if(this.appointmentPeriod[i].startTime == undefined){
                  this.$message({
                    message: '请选择时间段',
                    type: 'warning'
                  });
                  isTrue = false
              }else if(this.appointmentPeriod[i].endTime == undefined){
                  this.$message({
                        message: '请选择时间段',
                        type: 'warning'
                      });
                      isTrue = false
              }else if(this.appointmentPeriod[i].offlineNum == undefined){
                  this.$message({
                        message: '该时间段最高可预约人数未设置',
                        type: 'warning'
                      });
                      isTrue = false
              }else if(this.appointmentPeriod[i].number == undefined){
                  this.$message({
                        message: '该时间段非预约人用户可取号未设置',
                        type: 'warning'
                      });
                      isTrue = false
              }else{
                isTrue = true
              }
          }
      this.visible2 = isTrue;
      var itemList = [];
      this.appointmentPeriod.forEach((item, index) => {
        itemList.push(JSON.parse(
          JSON.stringify({
            label: item.startTime + "-" + item.endTime,
            value: index,
            disabled: false
          }))
        );
      });
     console.log(itemList,'itemList')
      this.notOrderTimeList = [];
      for (let i = 0; i < this.arrIndex.length; i++) {
        if (!Array.isArray(this.notOrderTimeList[i])) {
          this.notOrderTimeList[i] = [];
        }
        this.notOrderTimeList[i] = JSON.parse(JSON.stringify(itemList));
      }
       console.log(this.notOrderTimeList,'this.notOrderTimeList',this.arrIndex)
    },


    //非预约时间段改变
    getNotTime(e, index, f = true) {
      
      console.log(e,index,'ddddd')
      let _e = e;
      let temp = this.notOrderTimeList[index][e];
      temp.disabled = true;
      this.arrIndex[index];
      if (!f) {
        return false;
      }
      //求数组的差集
      Array.prototype.minus = function(arr) {
        var result = new Array();
        var obj = {};
        for (var i = 0; i < arr.length; i++) {
          obj[arr[i]] = 1;
        }
        for (var j = 0; j < this.length; j++) {
          if (!obj[this[j]]) {
            obj[this[j]] = 1;
            result.push(this[j]);
          }
        }
        return result;
      };
      var indexList = [];
      for (let i = 0; i < this.notOrderTimeList[index].length; i++) {
        indexList.push(i);
      }
      var minusLisr = indexList.minus(this.arrIndex[index]);

      for (let x = 0; x < minusLisr.length; x++) {
        let tepms = this.notOrderTimeList[index][minusLisr[x]];
        tepms.disabled = false;
      }
      if(this.arrIndex[index].length < this.notOrderTimeList[index].length){
           this.fullTimeDate[index] = false
      }else{
         this.fullTimeDate[index] = true
      }
    },

    //预约时间段yulan
    timeYulan(){
        this.dialogVisibleMakeTimeDate = true;
        this.yuLanTime  = this.getConfirmYuLan();
    },

    //预约时间段提交
    subMakeTime() {
      var length = this.appointmentPeriod.length;
      var appoTimeList = [];
      let isSub = false
      for (let i = 0; i < length; i++) {
        console.log(this.appointmentPeriod[length-1].startTime)
        if(!this.appointmentPeriod[i].startTime|| !this.appointmentPeriod[i].endTime){
          console.log('ss')
               this.$message({
                  message: '请设置时间段',
                  type: 'warning'
                });
                isSub = false;
        }else if(!this.appointmentPeriod[i].number ||!this.appointmentPeriod[i].offlineNum ){
           this.$message({
                  message: '请设置可预约人数',
                  type: 'warning'
                });
                isSub = false;
        }else{
          isSub = true
        }
        var dcs = {
          startTime: this.appointmentPeriod[i].startTime,
          endTime: this.appointmentPeriod[i].endTime,
          number: this.appointmentPeriod[i].number,
          offlineNum: this.appointmentPeriod[i].offlineNum,
          timeSerialNum: i+1
        };
        appoTimeList.push(dcs);
      }
      if(isSub == true){
        makeDateTimeSub({
          appoTimeList,
          notAppoTime: "" + this.getConfirm(),
          latticeId: this.latticeid,
          bookingPeopleFlag: true,
          effectiveTime: this.cannoteOederTime
        }).then(data => {
          console.log(data.data.msg);
          if(data.data.code == 0){
            this.$message({
              message: data.data.msg,
              type: 'success'
            });
            this.searchMakeFn();
            this.dateTimeMake = true;
          }else{
            this.$message({
              message: data.data.msg,
              type: 'warning'
            });
          }
          
        });
      }
      
    },

    //获取所选择的结束时间段
    getDateTime(e) {
      console.log(e);
      if (e == "24:00" || e == undefined) {
        this.fullTimeDate = true;
      }
    },

    //提前预约天数
    changeDate(e, el) {
      var nowMonth = new Date().getMonth() + 1;
      nowMonth =
        new Date().getDate() + parseInt(e) > this.nowMounthNum
          ? nowMonth + 1
          : nowMonth;
      var nowYear =
        nowMonth + 1 > 12
          ? new Date().getFullYear() + 1
          : new Date().getFullYear();
      var nowDate;
      nowDate =
        new Date().getDate() + parseInt(e) > this.nowMounthNum
          ? new Date().getDate() + parseInt(e) - this.nowMounthNum
          : new Date().getDate() + parseInt(e);
      el = new Date().getFullYear() + "/" + nowMonth + "/" + nowDate;
      return el;
    },
    getOrderBefore(e) {
      var _orderNumber = this.orderNumber;
      this.orderNumberTwo = _orderNumber.slice(parseInt(e), 16);
      this.canOederStart = this.changeDate(e, this.canOederStart);
    },
    getOrderBeforeTwo(e) {
      var _orderNumber = this.orderNumber;
      this.orderNumberOne = _orderNumber.slice(0, parseInt(e) + 1);
      this.changeDate(e, this.canOederEnd);
      this.canOederEnd = this.changeDate(e, this.canOederEnd);
    },
    //添加预约时间段
    addOrderTime() {
      let isTrue = false;
          for(var i=0;i<this.appointmentPeriod.length;i++){
              if(this.appointmentPeriod[i].startTime == undefined){
                  this.$message({
                    message: '请选择时间段',
                    type: 'warning'
                  });
                  isTrue = false
              }else if(this.appointmentPeriod[i].endTime == undefined){
                  this.$message({
                        message: '请选择时间段',
                        type: 'warning'
                      });
                      isTrue = false
              }else if(this.appointmentPeriod[i].offlineNum == undefined){
                  this.$message({
                        message: '该时间段最高可预约人数未设置',
                        type: 'warning'
                      });
                      isTrue = false
              }else if(this.appointmentPeriod[i].number == undefined){
                  this.$message({
                        message: '该时间段非预约人用户可取号未设置',
                        type: 'warning'
                      });
                      isTrue = false
              }else{
                isTrue = true
              }
          }
          if(isTrue){
              this.appointmentPeriod.push([]);
              this.arrIndex = [[], [], [], [], [], [], []].slice(this.textArrStart,this.textArrEnd);
          }
          if(this.appointmentPeriod[this.appointmentPeriod.length-1].endTime =='24:00'){
                this.$message({
                  message: '不能添加更多',
                  type: 'warning'
                });
          }
    },
    //删除预约时间段
    deleteMakeTime(i){    
        this.appointmentPeriod.splice(i,1)
        this.editDateFn();
    },

    //取号编辑
    fetchNumberMakefC() {
      this.fetchNumberMake = !this.fetchNumberMake;
      if (!this.fetchNumberMake) {
         this.dateMake = true;
        this.dateTimeMake = true;
        this.breakCintract = true;
        makeNumEit({ latticeId: this.latticeid }).then(data => {
          console.log(data.data);
          this.makeNunSet = data.data.data;
          this.radio = "" + data.data.data.takeNumSet;
          this.maxAppoNum = data.data.data.maxAppoNum;
          this.orderNumberDay[0] = data.data.data.appoDayStart;
          this.orderNumberDay[1] = data.data.data.appoDayEnd;
          this.orderNumberOne = this.orderNumber.slice(0,this.orderNumberDay[1])
          this.orderNumberTwo = this.orderNumber.slice(this.orderNumberDay[0],16)
          //获取当前日期，月份，天数
          function getMonthDays(year, month) {
            var thisDate = new Date(year, month, 0);
            return thisDate.getDate();
          }
          var nowMouth = new Date().getMonth() + 1;
          var nowYear = new Date().getFullYear();
          this.nowMounthNum = getMonthDays(nowYear, nowMouth);
          var nowDay =
            new Date().getDate() + this.orderNumberDay[0] > this.nowMounthNum
              ? new Date().getDate() +
                this.orderNumberDay[0] -
                this.nowMounthNum
              : new Date().getDate() + this.orderNumberDay[0];
          nowMouth =
            new Date().getDate() + this.orderNumberDay[0] > this.nowMounthNum
              ? nowMouth + 1
              : nowMouth;
          nowYear = nowMouth > 12 ? nowYear + 1 : nowYear;
          var nowMouth1 = new Date().getMonth() + 1;
          var nowYear1 = new Date().getFullYear();
          this.nowMounthNum = getMonthDays(nowYear, nowMouth);
          var nowDay1 =
            new Date().getDate() + this.orderNumberDay[1] > this.nowMounthNum
              ? new Date().getDate() +
                this.orderNumberDay[1] -
                this.nowMounthNum
              : new Date().getDate() + this.orderNumberDay[1];
          nowMouth1 =
            new Date().getDate() + this.orderNumberDay[1] > this.nowMounthNum
              ? nowMouth1 + 1
              : nowMouth1;
          nowYear1 = nowMouth1 > 12 ? nowYear1 + 1 : nowYear1;
          this.canOederStart = nowYear + "/" + nowMouth + "/"  + nowDay;
          this.canOederEnd = nowYear1 + "/" + nowMouth1 + "/"  + nowDay1;
        });
      }
    },
    //取号编辑提交
    subMakeValue() {
      subMakeNum({
        takeNumSet: this.radio=='true' ? true : false,
        appoNum: this.maxAppoNum,
        appoDayStart: this.orderNumberDay[0],
        appoDayEnd: this.orderNumberDay[1],
        latticeId: this.latticeid
      }).then(data => {
        this.$message({
          message:data.data.msg,
          type: 'success'
        });
        if(data.data.code == 0){
          this.searchData.appoDayStart = this.orderNumberDay[0];
          this.searchData.appoDayEnd = this.orderNumberDay[1];
          this.searchData.maxAppoNum = this.maxAppoNum;
          this.searchData.takeNumSet = this.radio=='true' ? true : false;
          setTimeout( ()=>{
              this.fetchNumberMake = true
          },500)
        }
      });
      
    },
    //爽约编辑
    breakCintractFc() {
      this.breakCintract = !this.breakCintract;
      if (!this.breakCintract) {
         this.dateMake = true;
        this.dateTimeMake = true;
        this.fetchNumberMake = true;

        breakEidt({ latticeId: this.latticeid }).then(data => {
          this.breakMessage = data.data.data;
          this.radio1 = data.data.data.breakAppoSet;
          this.breakNum = data.data.data.breakNum || "";
          this.breakDay = data.data.data.breakDay || "";
        });
      }
    },
    //爽约编辑提交
    subBreak() {
      if (!this.radio1) {
        breakSub({
          breakAppoSet: this.radio1,
          latticeId: this.latticeid
        }).then(data => {
          this.searchMakeFn();
           this.$message({
              message:data.data.msg,
              type: 'success'
          });
           setTimeout( ()=>{
              this.breakCintract = true
          },500)
        });
      } else {
        breakSub({
          breakAppoSet: this.radio1,
          breakNum: this.breakNum,
          breakDay: this.breakDay,
          latticeId: this.latticeid
        }).then(data => {
          this.searchMakeFn();
          this.$message({
            message:data.data.msg,
            type: 'success'
          });
           setTimeout( ()=>{
              this.breakCintract = true
          },500)
        });
      }
       
      
       
    },
    handleChange(value) {
      console.log(value);
    },
    isShow() {
      this.isShowDates = false;
      this.isShows = !this.isShows;
    },
    isShowDate() {
      this.isShows = false;
      this.isShowDates = !this.isShowDates;
    },
    // 非预约时间段添加
    addDateSlot(i) {   
      if(this.arrIndex[i].length>0){
          this.arrIndex[i].forEach((item,index) => {
            console.log(Boolean(item),this.arrIndex[i].length,this.notOrderTimeList[i].length)
              if( this.arrIndex[i].length >= this.notOrderTimeList[i].length){
                  this.fullTimeDate[i] = true;
              }else{
                this.arrIndex[i].push([""]);
                 this.fullTimeDate[i] = true;
              }

          })
      }else{
          this.arrIndex[i].push([""]);
          this.fullTimeDate[i] = true;
      }
     
    },
    isShowTimeSlots() {
      this.isShowTimeSlot = !this.isShowTimeSlot;
    },
    makeDateCancel() {
      this.isShowTimeSlot = false;
    }
  } // 函数
};
</script>
<style lang='scss' scoped>
.make {
  width: 100%;
  .titles {
    min-width: 960px;
    height: 88px;
    background: #fff;
    padding-left: 24px;
    display: block;
    h4 {
      font-size: 16px;
      color: #333437;
      line-height: 26px;
      padding-top: 18px;
      font-weight: bold;
    }
    span {
      font-size: 14px;
      color: #000;
      line-height: 26px;
      padding-right: 150px;
    }
  }
  .main {
    margin-top: 24px;
    padding: 40px 32px 40px;
    background: #fff;
    .dateMake {
      overflow: hidden;
      border: 1px solid #e9e9e9;
      margin-bottom: 40px;
      padding-bottom: 20px;
      h3 {
        height: 44px;
        line-height: 44px;
        background: #fafafa;
        font-weight: bold;
        border-bottom: 1px solid #e9e9e9;
        text-indent: 16px;
        font-size: 15px;
        margin-bottom: 20px;
        a {
          float: right;
          color: #328ef9;
          text-decoration: none;
          margin-right: 32px;
        }
      }
      span {
        display: block;
        margin-right: 150px;
        font-size: 15px;
        line-height: 30px;
        overflow: hidden;
        color: #999;
        strong {
          color: #333;
          font-weight: normal;
          padding-left: 16px;
          float: left;
          width: 132px;
          text-align: right;
        }
        .checkMore {
          width: 650px;
          float: left;
        }
        a {
          padding-left: 20px;
          color: #328ef9;
          text-decoration: none;
        }
      }
      .flLeft {
        width: 132px;
        float: left;
        text-align: right;
        line-height: 32px;
      }
      .flRight {
        float: left;
        color: #888;
        line-height: 32px;
        overflow: hidden;
      }
      .checkMake {
        width: 100%;
        float: left;
        padding-left: 110px;
        font-size: 14px;
        padding-bottom: 10px;
        margin-top: 10px;
        a {
          color: #328ef9;
          text-decoration: none;
          float: left;
        }
        i {
          float: right;
          color: #bbb;
          font-style: normal;
          margin-right: 32px;
        }
      }
    }
    .dateMakeOne {
      position: relative;
      padding-bottom: 80px;
      // overflow: hidden;
      clear: both;
      h3 {
        margin-bottom: 20px;
        a {
          color: #999;
        }
      }
      .dateMakeSnake {
        text-align: left;
        // position: relative;
        .dateOne {
          width: 350px;
          float: left;
          margin-right: 0px;
          position: relative;
          top: 4px;
          z-index: 2;
        }
        .dateTwo {
          width: 50px;
          float: left;
          position: relative;
          margin-right: 0px;
        }
        .imgSlot {
          font-size: 20px;
          position: relative;
          left: -12px;
          top: 4px;
          border: none;
        }
        .chooseDate {
          width: 350px;
          position: absolute;
          z-index: 3;
          left: 0px;
          opacity: 0;
        }
      }
      .primary {
        position: absolute;
        left: 50%;
        bottom: 20px;
        margin-left: -128px;
      }
      strong {
        font-weight: normal;
        width: 100px;
        display: inline-block;
        text-align: right;
      }
      .shuangyue {
        display: inline-block;
        font-size: 14px;
        padding-right: 30px;
        padding-left: 10px;
      }
    }
    // 时间段设置
    .dateTimeMake {
      color: #333;
      font-size: 14px;
      overflow: hidden;
      clear: both;
      .flLeft {
        width: 120px;
        overflow: hidden;
      }
      b {
        padding-left: 20px;
        font-weight: normal;
      }
      ul li {
        margin-bottom: 15px;
      }
      .el-button {
        margin-bottom: 10px;
      }
      .el-form-item {
        margin-bottom: 0;
        img {
          width: 22px;
          transform: rotate(180deg);
          margin-left: 10px;
          margin-right: 12px;
          cursor: pointer;
          position: relative;
          top: 5px;
        }
      }
      .timeSlot{
          position: fixed;
          width: 100%;
          height: 100%;
          left: 0;
          top: 0;
          z-index: 999;
          background: rgba(0,0,0,.6);
          display: flex;
          justify-content: center;
          align-items: center;
          .timeSlotMain{
            padding: 20px 0;
            border-radius: 5px;
              width: 410px;
              overflow: hidden;
              background: #fff;
              ul{
                li{
                  margin-bottom: 0px;
                  span{
                    margin-right: 0px;
                  }
                }
              }
          }
      }
    }

    .fetchNumber {
      overflow: hidden;
      border: 1px solid #e9e9e9;
      margin-bottom: 40px;
      padding-bottom: 20px;
      h3 {
        height: 44px;
        line-height: 44px;
        background: #fafafa;
        font-weight: bold;
        border-bottom: 1px solid #e9e9e9;
        text-indent: 16px;
        font-size: 15px;
        margin-bottom: 20px;
        a {
          float: right;
          color: #328ef9;
          text-decoration: none;
          margin-right: 32px;
        }
      }
      span {
        width: 50%;
        padding: 20px 0 0;
        float: left;
        font-size: 15px;
        line-height: 26px;
        text-indent: 16px;
        color: #999;
        strong {
          color: #333;
          font-weight: normal;
          display: inline-block;
          width: 115px;
          text-align: right;
        }
      }
    }
    // 取号编辑
    .fetchNumberOne {
      position: relative;
      padding-bottom: 80px;
      h3 {
        a {
          color: #999;
        }
      }
      div {
        margin-bottom: 15px;
        color: #999;
        font-size: 14px;
        strong {
          display: inline-block;
          width: 100px;
          text-align: right;
          font-weight: normal;
        }
        b {
          font-weight: normal;
        }
      }
      .primary {
        position: absolute;
        left: 50%;
        bottom: 20px;
        margin-left: -128px;
      }
    }
  }
}
.el-form-item {
  float: left;
  position: relative;
  margin-bottom: 5px;
}
.el-select-dropdown__item {
  text-align: center;
}
.preview p {
  line-height: 32px;
  color: #666;
}
</style>
